<div class="l-title-group">
    <h2 class="l-chart-title">{{title}}</h2>
    <!-- <button class="fas fa-question-circle" (click)="onShowHelp($event)"></button> -->
</div>
<!-- <ng-container *ngIf="isGroupedMetric"> -->
    <div class="l-chart-option" [class.l-option-boundary]="isGroupedMetric">
        <ng-container *ngIf="isGroupedMetric">
            <div class="l-option-wrapper">
                <h3 class="l-option-label">Group</h3>
                <div class="l-select-container" [attr.data-content]="selectedTag">
                    <select class="l-tag-select" [ngModel]="selectedTag" (ngModelChange)="onChangeTag($event)">
                        <option class="l-tag-select-option" *ngFor="let tag of tagList" [ngValue]="tag">{{tag}}</option>
                    </select>
                    <span class="fas fa-angle-down"></span>
                </div>
            </div>
        </ng-container>
    </div>
 <!-- </ng-container> -->
<div class="l-chart-area-wrapper">
    <pp-loading [showLoading]="isActiveLayer('loading')" [zIndex]="10"></pp-loading>
    <pp-retry [showRetry]="isActiveLayer('retry')" [message]="retryMessage" (outRetry)="onRetry()"></pp-retry>
    <pp-metric
        [ngClass]="chartVisibility"
        [chartConfig]="chartConfig"
        (outRendered)="onRendered()">
    </pp-metric>
</div>
